<template>
    <div class="zsListLookCard" @click="itemClick">
        <div class="zsListLookCard_img">
            <van-image class="img" radius="5"
                :src="datas?.productImages ? datas?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
            <span v-if="datas?.hmMechanismsList[1].cooperationMode">多机制</span>
        </div>
        <div class="zsListLookCard_box">
            <div class="box_title">
                <b>{{ datas?.styleName }}</b>
                <div class="status"></div>
                <span v-if="type === '1' || type === '4'"
                    :style="computedAtatusColor(auditStatusNameById(datas?.auditStatus))">{{
                        auditStatusNameById(datas?.auditStatus) }}</span>
                <span v-if="type === '2' || type === '3'" :class="`${isStatusName(datas?.status)[0]}`">{{ datas?.status
                    }}</span>
            </div>
            <div class="box_text" v-if="type === '1' || type === '4'">
                {{ datas?.sellingPoints }}
            </div>
            <div class="box_money">
                <span class="box_money_one">￥</span>
                <span class="box_money_two">{{ datas?.hmMechanismsList[0].cooperationMode ===
                    '分佣' ? datas?.hmMechanismsList[0].price : datas?.hmMechanismsList[0].costPrice }}</span>
                <div class="box_money_three" v-if="datas?.hmMechanismsList[0].cooperationMode === '分佣'">
                    <div class="box_money_three_left">佣</div>
                    <div class="box_money_three_right">{{ datas?.hmMechanismsList[0].commission }}%</div>
                </div>
                <span class="box_money_four">{{ datas?.hmMechanismsList[0].liveStreamingMechanism }}</span>
            </div>
            <div class="box_pendant" v-if="type === '1'">
                <!-- <div class="box_pendant_box">
                    <img src="@/assets/operation/icon_cuijian.png" alt="" @click.stop="reminder">
                    催件
                </div> -->
            </div>
            <div class="box_expirationTime" v-if="type === '2'">
                到期时间：{{ datas?.cycleTime }}
            </div>
            <div class="box_explain" v-if="type === '2'">
                <div class="box_explain_left">
                    <div class="left_one">
                        <div class="left_one_title">出库数</div>
                        <div class="left_one_text">{{ datas?.totalOutNum || 0 }}件</div>
                    </div>
                    <div class="left_one"
                        v-if="isStatusName(datas?.status)[1] === '已归还' || isStatusName(datas?.status)[1] === '超期归还'">
                        <div class="left_one_title">还品数</div>
                        <div class="left_one_text">{{ datas?.totalPutNum || 0 }}<span>/{{ datas?.totalOutNum || 0
                                }}件</span>
                        </div>
                    </div>
                    <img v-if="datas?.noPutStatus == 1 && datas?.putStatus == 1"
                        src="@/assets/operation/icon_tanhao.png" alt=""
                        @click.stop="() => { nonReturnRef.init(datas) }">
                </div>
                <div class="box_explain_right" v-if="datas?.putStatus != 1" @click.stop="notReturnClick()">
                    {{ datas?.noPutStatus == 1 ? '修改说明' : '不还说明' }}</div>
            </div>
            <div class="box_explainAll" v-if="type === '3'">
                <div class="box_explainAll_top">
                    <div class="left_one">
                        <div class="left_one_title">{{ datas?.outType === 4 ? '借调数' : '选品数' }}</div>
                        <div class="left_one_text">{{ datas?.totalOutNum || 0 }}件</div>
                    </div>
                </div>
                <div class="box_explainAll_bottom">
                    <div class="bottom_left">
                        <div class="left_one">
                            <div class="left_one_title">还品数</div>
                            <div class="left_one_text" v-if="datas?.outType === 4">{{ datas?.putNum || 0
                                }}<span>件</span></div>
                            <div class="left_one_text" v-else>{{ datas?.putNum || 0
                                }}<span>/{{ datas?.totalOutNum || 0 }}件</span></div>
                        </div>
                        <img v-if="datas?.noPutStatus == 1 && datas?.putStatus == 1"
                            src="@/assets/operation/icon_tanhao.png" alt=""
                            @click.stop="() => { nonReturnRef.init(datas) }">
                    </div>
                    <div class="box_explain_right" v-if="datas?.putStatus != 1" @click.stop="notReturnClick()">{{
                        datas?.noPutStatus == 1 ? '修改说明' : '不还说明' }}</div>
                </div>
            </div>
        </div>
    </div>
    <van-popup v-model:show="showBottom" position="bottom" teleport="#app" closeable round :style="{ height: '450px' }">
        <div class="explain_popup">
            <div class="explain_popup_box">
                <div class="explain_popup_top">
                    <van-image class="explain_popup_top_img" radius="5"
                        :src="datas?.productImages ? datas?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
                    <span class="explain_popup_top_tag" v-if="datas?.hmMechanismsList[1].cooperationMode">多机制</span>
                    <div class="explain_popup_top_right">
                        <div class="right_title">{{ datas?.styleName }}</div>
                        <div class="right_text">出库时间：{{ datas?.outTime }}</div>
                        <div class="right_tag">
                            <div class="right_tag_one">
                                <div class="right_tag_one_left">出库数</div>
                                <div class="right_tag_one_right">{{ datas?.totalOutNum || 0 }}件</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="explain_popup_form numberInput">
                    <div class="label">还品数量</div>
                    <van-stepper v-model="notReturnValue" integer min="0" :max="datas?.totalOutNum || 0"
                        @change="notReturnChange" />
                </div>
                <div class="explain_popup_form">
                    <div class="label">不还数量</div>
                    <div class="value">{{ (Number(datas?.totalOutNum) || 0) - Number(notReturnValue) }}件</div>
                </div>
                <div class="explain_popup_form" v-if="(Number(datas?.totalOutNum) || 0) - Number(notReturnValue) === 0">
                    <div class="label"></div>
                    <div class="valuex">
                        <img class="valuex_img" :src="Buhuantanhao" alt="">
                        全部归还将清除此条不还说明
                    </div>
                </div>
                <div class="explain_popup_form">
                    <div class="label">说明</div>
                    <van-field style="flex: 0.8;background: #F6FAFF;" show-word-limit v-model="notReturnMessage"
                        rows="1" type="textarea" placeholder="请输入" maxlength="50" />
                </div>
            </div>

            <div class="explain_popup_button">
                <!-- <div class="button_box" >提交</div> -->
                <van-button :loading="loading" loading-text="执行中..." class="buttons" @click="notReturnSubmit"
                    v-throttle:click>
                    提交
                </van-button>
            </div>
        </div>
    </van-popup>
    <NonReturn ref="nonReturnRef" />
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import { auditStatusNameById } from "@/utils/auditStatusFilter";
import Buhuantanhao from '@/assets/home/buhuantanhao.png'
import { showToast, showFailToast } from 'vant';
// api
import { submitNoRemark } from '@/api/operation/index'
// 组件
import NonReturn from '@/components/nonReturn/index.vue'
const loading = ref(false)
const props = defineProps(['type', 'datas'])
const emit = defineEmits(['onRefresh', 'itemClick'])

const nonReturnRef = ref()
const showBottom = ref(false)
const notReturnValue = ref<string>('0')
const notReturnMessage = ref('')

const isStatusName = (status: string) => {
    if (status === '已归还') {
        return ['box_title_lv', '已归还']
    } else if (status === '超期归还') {
        return ['box_title_huang', '超期归还']
    } else if (status.includes('已选')) {
        return ['box_title_lan', '已选']
    } else if (status.includes('超期')) {
        return ['box_title_red', '超期']
    } else {
        return ['box_title_none', '未知']
    }
}
/** 设置不同状态不同样式 */
const computedAtatusColor = (name: any) => {
    if (name.includes('待')) {
        return { backgroundColor: '#EBF4FF', color: '#0094FF' }
    } else if (name.includes('驳回') || name == '已下架' || name == '已退还') {
        return { backgroundColor: '#FDE7E7', color: '#FC2540' }
    } else {
        return { backgroundColor: '#E7FDEE', color: '#19D11B' }
    }
}

const notReturnChange = (val) => {
    if (Number(props?.datas?.totalOutNum - val) < 0) {
        notReturnValue.value = String(props?.datas?.totalOutNum)
    }
}
// 打开不还说明
const notReturnClick = () => {
    notReturnValue.value = props?.datas.returnNum || 0
    notReturnMessage.value = props?.datas.noPutRemark || ''
    showBottom.value = true
}
// 不还说明提交
const notReturnSubmit = async () => {
    loading.value = true
    try {
        if (props?.datas?.totalOutNum - Number(notReturnValue.value)) {
            if (notReturnMessage.value) {
                await submitNoRemark({ id: props?.datas?.id, remark: notReturnMessage.value, notReturnNum: props?.datas?.totalOutNum - Number(notReturnValue.value), returnNum: notReturnValue.value })
                showToast('提交完成')
                loading.value = false
                showBottom.value = false
                emit('onRefresh')
            } else {
                showToast('请填写不还说明！')
                loading.value = false
            }
        } else {
            await submitNoRemark({ id: props?.datas?.id, remark: notReturnMessage.value, notReturnNum: props?.datas?.totalOutNum - Number(notReturnValue.value), returnNum: notReturnValue.value })
            showToast('提交完成')
            loading.value = false
            showBottom.value = false
            emit('onRefresh')
        }
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('提交失败');
        }
        loading.value = false
    }

}
const itemClick = () => {
    emit('itemClick')
}
</script>

<style lang="less" scoped>
.zsListLookCard {
    width: 100%;
    margin-bottom: 10px;
    background: #fff;
    display: flex;

    .zsListLookCard_img {
        width: 120px;
        height: 120px;
        margin-right: 10px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;

        .img {
            width: 100%;
            height: 100%;
        }

        span {
            position: absolute;
            top: 0;
            left: 0;
            width: 46px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            background: #0094FF;
            border-radius: 5px 0px 5px 0px;
            border: 1px solid #0094FF;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
        }
    }

    .zsListLookCard_box {
        flex: 1;
        min-width: 0;

        .box_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;

            b {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                flex: 0.9;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            span {
                min-width: 56px;
                height: 22px;
                border-radius: 2px;
                line-height: 22px;
                text-align: center;
                font-weight: 500;
                font-size: 12px;
                padding: 0 5px;
            }

            .box_title_lan {
                background: #EBF4FF;
                color: #0094FF;
            }

            .box_title_lv {
                background: #E7FDEE;
                color: #19D11B;
            }

            .box_title_red {
                background: #FDE7E7;
                color: #FC2540;
            }

            .box_title_huang {
                background: #FFE9E1;
                color: #FF5A1A;
            }

            .box_title_none {
                display: none;
            }

        }

        .box_text {
            font-weight: 400;
            font-size: 12px;
            color: #8492AD;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .box_money {
            margin-top: 5px;
            width: 100%;
            display: flex;
            align-items: center;

            .box_money_one {
                font-weight: 400;
                font-size: 12px;
                color: #FC2540;
            }

            .box_money_two {
                font-weight: 500;
                font-size: 18px;
                color: #FC2540;
                margin-right: 10px;
            }

            .box_money_three {
                height: 16px;
                background: linear-gradient(136deg, #E9D1A5 0%, #CEA46C 100%);
                border-radius: 2px;
                display: flex;
                overflow: hidden;
                margin-right: 10px;

                .box_money_three_left {
                    padding: 0 4px;
                    box-sizing: border-box;
                    height: 100%;
                    background: #1B1714;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 400;
                    font-size: 12px;
                    color: #CEA46C;
                    border-radius: 2px;
                }

                .box_money_three_right {
                    padding: 0 4px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 500;
                    font-size: 12px;
                    color: #1B1714;
                }
            }

            .box_money_four {
                max-width: 80px;
                height: 16px;
                border-radius: 2px;
                border: 1px solid #FF5A1A;
                font-weight: 400;
                font-size: 10px;
                color: #FF5A1A;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 5px;
                box-sizing: border-box;
            }
        }

        .box_expirationTime {
            margin-top: 10px;
            font-weight: 400;
            font-size: 12px;
            color: #8492AD;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .box_pendant {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 10px;

            .box_pendant_box {
                width: 60px;
                height: 24px;
                border-radius: 2px;
                border: 1px solid #FF5A1A;
                display: flex;
                align-items: center;
                padding: 0 5px;
                font-weight: 400;
                font-size: 14px;
                color: #FF5A1A;

                img {
                    width: 18px;
                    height: 18px;
                    margin-right: 5px;
                }
            }
        }

        .box_explain {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;

            .box_explain_left {
                display: flex;
                align-items: center;

                .left_one {
                    background: #EBF4FF;
                    border-radius: 2px;
                    display: flex;
                    margin-right: 10px;

                    .left_one_title {
                        padding: 3px 5px;
                        background: #0094FF;
                        border-radius: 2px;
                        line-height: 15px;
                        text-align: center;
                        font-weight: 400;
                        font-size: 10px;
                        color: #FFFFFF;
                        box-sizing: border-box;
                    }

                    .left_one_text {
                        box-sizing: border-box;
                        padding: 3px 5px;
                        line-height: 15px;
                        text-align: center;
                        font-weight: 500;
                        font-size: 10px;
                        color: #0094FF;

                        span {
                            color: #8492AD;
                        }
                    }
                }

                img {
                    width: 14px;
                    height: 14px;
                }
            }

            .box_explain_right {
                width: 84px;
                height: 24px;
                background: #0094FF;
                border-radius: 2px;
                line-height: 24px;
                text-align: center;
                font-weight: 500;
                font-size: 14px;
                color: #FFFFFF;
            }
        }

        .box_explainAll {
            margin-top: 15px;

            .box_explainAll_top {
                margin-bottom: 5px;
                display: flex;
            }

            .box_explainAll_bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .bottom_left {
                    display: flex;
                    align-items: center;

                    img {
                        width: 14px;
                        height: 14px;
                    }
                }

                .box_explain_right {
                    width: 84px;
                    height: 24px;
                    background: #0094FF;
                    border-radius: 2px;
                    line-height: 24px;
                    text-align: center;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                }
            }

            .left_one {
                background: #EBF4FF;
                border-radius: 2px;
                display: flex;
                margin-right: 10px;

                .left_one_title {
                    padding: 3px 5px;
                    background: #0094FF;
                    border-radius: 2px;
                    line-height: 15px;
                    text-align: center;
                    font-weight: 400;
                    font-size: 10px;
                    color: #FFFFFF;
                    box-sizing: border-box;
                }

                .left_one_text {
                    box-sizing: border-box;
                    padding: 3px 5px;
                    line-height: 15px;
                    text-align: center;
                    font-weight: 500;
                    font-size: 10px;
                    color: #0094FF;

                    span {
                        color: #8492AD;
                    }
                }
            }
        }

    }


}

.explain_popup {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;

    .explain_popup_box {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-top: 20px;
        box-sizing: border-box;

        .explain_popup_top {
            width: 100%;
            display: flex;
            position: relative;

            .explain_popup_top_img {
                width: 120px;
                height: 120px;
                margin-right: 10px;
                border-radius: 5px;
            }


            .explain_popup_top_tag {
                position: absolute;
                top: 0;
                left: 0;
                width: 46px;
                height: 22px;
                line-height: 22px;
                text-align: center;
                background: #0094FF;
                border-radius: 5px 0px 5px 0px;
                border: 1px solid #0094FF;
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF;
            }

            .explain_popup_top_right {
                flex: 1;
                min-width: 0;

                .right_title {
                    margin-top: 10px;
                    margin-bottom: 47px;
                    font-weight: 500;
                    font-size: 16px;
                    color: #1A1B1C;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .right_text {
                    font-weight: 400;
                    font-size: 12px;
                    color: #8492AD;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-bottom: 10px;
                }

                .right_tag {
                    display: flex;
                    align-items: center;

                    .right_tag_one {
                        display: flex;
                        background: #EBF4FF;
                        border-radius: 2px;

                        .right_tag_one_left {
                            padding: 3px 5px;
                            background: #0094FF;
                            border-radius: 2px;
                            font-weight: 400;
                            font-size: 10px;
                            color: #FFFFFF;
                        }

                        .right_tag_one_right {
                            padding: 3px 5px;
                            font-weight: 500;
                            font-size: 10px;
                            color: #0094FF;
                        }
                    }
                }
            }
        }

        .explain_popup_form {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            .label {
                font-weight: 400;
                font-size: 16px;
                color: #1A1B1C;
            }

            .value {
                font-weight: 400;
                font-size: 16px;
                color: #FC2540;
            }

            .valuex {
                font-weight: 400;
                font-size: 12px;
                display: flex;
                align-items: center;

                .valuex_img {
                    width: 12px;
                    height: 12px;
                }
            }
        }
    }

    .explain_popup_button {
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;

        .buttons {
            width: 100%;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
        }

        .button_box {
            width: 100%;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            line-height: 44px;
            text-align: center;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}
</style>